<template>
	<view class="join-page">
		<view v-if="!result" class="join-form-wrap">
			<view class="form-item">
						<text class="form-item-title">姓名</text>
						<input style="width: calc(100% - 64rpx);" v-model="createForm.name" class="uni-input" placeholder="请输入您的姓名" />
					</view>
					<view class="form-item">
						<text class="form-item-title">电话</text>
						<input style="width: calc(100% - 64rpx);" v-model="createForm.phone" class="uni-input" placeholder="请输入您的电话" />
					</view>
					<view class="form-item">
						<text class="form-item-title">地址</text>
						<input style="width: calc(100% - 64rpx)" :disabled="true" class="uni-input" :placeholder="defaultAddress" @click="handleOpenSel" />
						<LbPicker ref="picker" v-model="createForm.address" :list="listCityData" :level="3" class="picker" mode="multiSelector" confirm-color="#3B73FF" @confirm="handleConfirm" />
					</view>
					<view class="form-item">
						<text class="form-item-title">详细地址</text>
						<textarea v-model="createForm.details" :auto-height="true" style="max-height: 140rpx;width: calc(100% - 140rpx)" class="text-area" placeholder="街道门牌信息" />
					</view>
					<view class="form-item">
						<text class="form-item-title">备注</text>
						<input style="width: calc(100% - 64rpx)" v-model="createForm.remark" class="uni-input" placeholder="请输入备注" />
					</view>
					<view class="btn-row"><button class="btn-primary block" @click="handleSave">提交申请</button></view>
		</view>
		<view v-else class="join-result">
			<Result :result="result" />
		</view>
	</view>
</template>

<script>
import LbPicker from '@/components/lb-picker/index.vue';
import cityData from '@/utils/city.js';
import Result from './components/result.vue'

export default {
	components: {
		LbPicker,
		Result
	},
	data() {
		return {
			listCityData: cityData,
			createForm: {
				name: undefined,
				phone: undefined,
				address: undefined,
				details: undefined,
				remark: undefined
			},
			defaultAddress: '请选择您的地址',
			result: 0
		};
	},
	methods: {
		// 打开地址选择
		handleOpenSel() {
			this.$refs.picker.show();
		},
		// 保存地址
		handleSave() {
			uni.showLoading();
			setTimeout(() => {
				uni.hideLoading();
				uni.showToast({
					title: '申请成功',
					icon: 'success',
					duration: 2000,
					success: function() {
						uni.navigateBack();
					}
				});
			}, 3000);
		},
		// 确认后获取文本
		handleConfirm(e) {
			this.defaultAddress = e.item.map(item => item.label).join('-');
		}
	}
};
</script>

<style lang="scss">
	.join-page{
		min-height: 100vh;
		background: $white;
		.form-item {
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 1rpx solid $uni-border-color;
			padding: 20rpx;
			&:nth-of-type(4) {
				align-items: start;
				.form-item-title {
					width: 140rpx;
				}
			}
			.form-item-title {
				width: 72rpx;
			}
		}
		.btn-row {
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			padding: 40rpx;
			box-sizing: border-box;
		}
	}
</style>
<style lang="scss">
.create-ad {
	.uni-input,
	.picker,
	.text-area {
		flex: 1;
		width: 100%;
		min-width: 0;
		border: 0 none;
		color: $uni-text-color-placeholder;
	}
}
</style>
